<template>
    <div class="box">
        <div class="top">
            <p class="title">热门景区排行</p>
            <p class="bg"></p>
        </div>
        <!-- 图形图标容器 -->
        <div class="charts" ref="charts"></div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import * as echarts from 'echarts';
//获取DOM节点
let charts = ref();
//组件挂载完毕
onMounted(() => {
    //一个容器可以同时展示多种类型的图形图表
    let mycharts = echarts.init(charts.value);
    //设置配置项
    mycharts.setOption({
        //标题组件
        title: {
            text: '景区排行',//主标题
            link: 'https://echarts.apache.org/zh/option.html#title.link',//主标题文本超链接。
            left: '50%',//标题位置
            textStyle: {//主标题文字样式
                color: 'skyblue',
                fontSize: 20,
            },
            subtext: '各大景区排行',//子标题
            subtextStyle: {//子标题样式
                color: 'white'
            }
        },
        //x|y轴组件
        xAxis: {
            type: 'category',//图形图表在x轴上均匀分布展示
        },
        yAxis: {
            
        },
        //布局组件
        grid: {
            left: 20,
            right: 0,
            top: 100,
            bottom: 20,
        },
        //系列：决定显示图形图表是哪一种
        //多个图放数组，一个图放对象
        series: [
            {
                type: 'bar',
                data: [100, 540, 399, 660, 399, 180, 888],
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: 'rgb(220, 239, 181)' // 0% 处的颜色
                    }, {
                        offset: 1, color: 'rgb(28, 101, 192)' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                },
                //柱状图的：图形上的文本标签
                label: {
                    show: true,
                    position: 'insideTop',//文字位置
                    color: 'white',//文字颜色
                },
                showBackground: true,
                backgroundStyle: {
                    color: 'rgba(180, 180, 180, 0.2)',
                },
                itemStyle:{//柱条的样式
                    borderRadius: [5, 5, 0, 0] ,//（顺时针左上，右上，右下，左下）
                    // //柱条颜色
                    // color:function(data:any){
                    //     //给每一个柱条添加背景颜色
                    //     let arr=['rgb(28, 101, 192)','rgb(28, 101, 192)','rgb(28, 101, 192)','rgb(28, 101, 192)','rgb(28, 101, 192)','rgb(28, 101, 192)','rgb(28, 101, 192)']
                    //     return arr[data.dataIndex];
                    // }
                }
            },
            {
                type:'line',
                data:[11,555,345,90,234,865,431],
                // smooth:true,//平滑曲线
            }
        ],
        tooltip:{
            show:true,
            backgroundColor:'rgba(50,50,50,0.7)',
        }
    })
})
</script>

<style lang="scss" scoped>
.box {
    background: url(../../images/dataScreen-main-lb.png) no-repeat;
    background-size: 100% 100%;
    margin-top: 15px;

    .top {
        margin-left: 20px;

        .title {
            color: white;
            font-size: 20px;
        }

        .bg {
            width: 68px;
            height: 7px;
            background: url(../../images/dataScreen-title.png) no-repeat;
            background-size: 100% 100%;
            margin-top: 10px;
        }
    }

    .charts {
        height: 380px;
    }
}
</style>
